<template>
    <el-dialog :visible.sync="show"
           v-loading="loading"
           :show-close="false"
           :width="wrapWidth"
           :top="wrapTop"
           ref="modal"
    >
        <iFrame :src="url" style="width: 100%" :style="{height: '65vh'}"></iFrame>
        <template slot="footer">
            <el-button size="mini" @click="handleCancel">关闭</el-button>
        </template>
    </el-dialog>
</template>
<script>
const PDFJS = require('pdfjs-dist')
PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.entry.js')
import { downloadFile } from '@/api/planInfo.js'

export default {
    name: 'pdf-view-modal',
    data() {
        return {
            show: false,
            loading: false,
            url: '',
            modalTop: 100,
            wrapWidth: '60%',
            wrapTop: '10vh',
            wrapHeight: 950,
            pages: 1
        }
    },
    methods: {
        loadFile(row, whId) {
            const params = {
                urlStr: row.fileUrl,
                whId: whId
            }
            let typeName = '';
            let suffix = row.fileName.split('.')[1].toLowerCase();
            if (suffix == 'pdf') {
                typeName = 'application/pdf;chartset=UTF-8';
            } else if (suffix == 'png') {
                typeName = 'image/png;chartset=UTF-8';
            } else if (suffix == 'jpg' || suffix == 'jpeg') {
                typeName = 'image/jpeg;chartset=UTF-8';
            }
            this.show = true
            this.loading = true;
            downloadFile(params).then(({
                data
            }) => {
                this.url = window.URL.createObjectURL(
                    new Blob([data], {
                        type: typeName
                    })
                )
            }).finally(() => {
                this.loading = false;
            })
        },
        handleCancel() {
            this.show = false
        }
    }
}
</script>
<style lang="less" scoped>
    /deep/ .el-dialog__body {
        padding: 0px 20px !important;
    }
    /deep/ .el-dialog__headerbtn {
        top: 5px;
    }
</style>

